<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title></title>
		<script type="text/javascript" src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
		
	</head>
	<body>
		<div id="div1" style="width: 600px; height: 400px;"></div>
		<div id="div2" style="width: 600px; height: 400px;"></div>
		<div id="div3" style="width: 600px; height: 400px;"></div>
		<div id="pie" style="width: 600px; height: 400px;"></div>
		<div id="radar" style="width: 600px; height: 400px;"></div>
		<div id="gauge" style="width: 600px; height: 400px;"></div>
	</body>
	<script type="text/javascript">
		/* 
			柱状图常见效果
				标记：最大值、最小值、平均值、
					markPoint:[{},{}]
					markLine:{平均值}
					markArea: 标注区间
				显示：	数值显示  柱宽度  横向柱状图
					label
					barWidth
					更改x轴和Y轴的角色
			------------------------------------------------------------------------------
			通用配置
				通用配置指的就是任何表都能使用的配置
				标题 -- title
					文字样式
						textStyle
					标题边框
						borderWidth /	borderColor	/ borderRadius(标题边框的圆角)
					标题位置
						left	right	top		bottom
				提示 -- tooltip
					tooltip:提示组件，用于配置鼠标滑过或点击图表时的显示框
						trigger:触发类型
							item数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
							axis坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
						triggerOn:触发时机
							mouseover
							click
						formatter:格式化
							字符串模板
								折线（区域）图、柱状（条形）图、K线图 : {a}（系列名称），{b}（类目值），{c}（数值）, {d}（无）
								散点图（气泡）图 : {a}（系列名称），{b}（数据名称），{c}（数值数组）, {d}（无）
								地图 : {a}（系列名称），{b}（区域名称），{c}（合并数值）, {d}（无）
								饼图、仪表盘、漏斗图: {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）
							回调函数
								例子：formatter:function(arg){
										// console.log(arg);
										return arg[0].name + "的成绩是" + arg[0].data;  // formatter 回调函数
									 }
				工具按钮 -- toolbox
					toolbox:Echart提供的工具栏
						内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具
						显示工具栏按钮 feature   各工具配置项。 除了各个内置的工具按钮外，还可以自定义工具按钮。
							saveAsImage:{},	//导出图片
							dataView:{},	//数据视图
							restore:{},	    //重置
							dataZoom:{},	//区域缩放
							magicType:{}
				图例 -- legend
						legend:图例，用于筛选系列，需要和series配合使用
						legend中的data是一个数组
						legend中的data的值，需要和series数组中某数据的name值一样
			--------------------------------------------------------------------------------------------------
			直角坐标系图表:柱状图/折线图/散点图
				1.网格:grid
					  grid是用来控制直角坐标系的布局和大小
					  x轴和y轴就是在grid的基础上进行绘制的
					  显示grid		show
					  grid的边框	borderWidth	borderColor
					  grid的位置和大小	left	top	right	bottom	width	height
				2.坐标轴:axis
					  坐标轴分为x轴y轴
					  一个grid中最多有两种位置的x轴y轴
					  坐标轴的类型 type
							value:数值轴,自动会从目标数据中读取数值
							category:类目轴,该类型必须通过data设置类目数值
					  显示位置 position
							xAxis:可取值为top或者bottom
							yAxis:可取值为left可取值right
				3.区域缩放: dataZoom
					  dataZoom用于区域缩放,对数据范围过滤,x轴和y轴都可以拥有
					  dataZoom是一个数组,意味着可以配置多个区域缩放器
					  类型:type
							   silder:滑块
							   inside:内置,依靠鼠标滚轮或者双指缩放
					指明产生作用的轴
							xAxisIndex:设置缩放组件控制的那个x轴,一般都写0
							yAxisIndex:设置缩放组件控制的是那个y轴,一般都写0
					指明初始状态的缩放情况
							start:数据窗口范围的起始百分比
							end:数据窗口范围的结束百分比
		 */
		var myCharts = echarts.init(document.querySelector("#div1"));
		var xDataArr = ["张三","小明","小红","李四","王五","大强","小强"];
		var yDaraArr1 = [88,90,50,80,99,65,100];
		var yDaraArr2 = [68,50,59,40,60,70,60];
		var option = {
			dataZoom:[// 区域缩放
				{
					type:"slider",// 滑块
					// type:"inside"
					xAxisIndex:0 // 产生作用的轴
				},
				{
					type:"slider",
					yAxisIndex:0,  // 产生作用的轴
					start:0,// 初始状态的缩放情况
					end:80
				}
			],
			/* grid:{// 网格
				show:true,//显示网格
				borderWidth:10, //网格宽度
				borderColor:"red",// 网格颜色
				left:120,	// 位置移动
				top:120,
				width:300,	//大小的改变
				height:150
			}, */
			title:{
				text:"成绩展示",
				link:"https://www.baodu.com",	// link主标题文本超链接。
				textStyle:{
					color:"red",//主标题文字的颜色。
					fontWeight:"bolder"   //主标题文字字体的粗细。
				}
			},
			tooltip:{
				// trigger:"item"
				trigger:"axis",
				// triggerOn:"click"// 点击过才出现提示框
				// formatter:"{b} 的成绩是 {c}" // 可以自定义  滑动显示数据   字符串
				formatter:function(arg){
					// console.log(arg);
					return arg[0].name + "的成绩是" + arg[0].data;  // formatter 回调函数
				}
			},
			toolbox:{
				feature:{//各工具配置项。 除了各个内置的工具按钮外，还可以自定义工具按钮。
					saveAsImage:{},	//导出图片
					dataView:{},	//数据视图
					restore:{},	//重置
					dataZoom:{},		//区域缩放
					magicType:{
						type:["bar","line"]
					}
				}
			},
			legend:{
				data:["语文","数学"]
			},
			// 竖状图
			xAxis:{
				type:"category",//数值轴，适用于连续数据。
				data:xDataArr,
				position:"top"
			},
			yAxis:{
				type:"value"
			},
			// 横状图
			/* xAxis:{
				type:"value"
			},
			yAxis:{
				type:"category",
				data:xDataArr
			}, */
			series:[{
				name:"语文",//系列名称
				type:"bar",//柱状图（或称条形图）是一种通过柱形的高度
				markPoint:{
					data:[
						{
							type:"max",name:"最大值"
						},{
							type:"min",name:"最小值"
						}
					],
					itemStyle:{	//标注的样式。
						color:"red",
						borderColor:"red"
					}
				},
				markLine:{
					data:[{type:"average",name:"平均值"}]  // 平均值
				},
				label:{//图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。
					show:true,
					rotate:60,	//旋转60度
					position:"top" //标签的位置
				},
				barWidth:"40%",	//柱条的宽度，不设时自适应。
				data:yDaraArr1	//yAxis的数据来源
			},{
				name:"数学",
				type:"bar",
				markPoint:{
					data:[
						{
							type:"max",name:"最大值"
						},{
							type:"min",name:"最小值"
						}
					],
					itemStyle:{	//标注的样式。
						color:"blue",
						borderColor:"blue"
					}
				},
				markLine:{
					data:[{type:"average",name:"平均值"}]  // 平均值
				},
				label:{//图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。
					show:true,
					rotate:60,	//旋转60度
					position:"top" //标签的位置
				},
				barWidth:"40%",	//柱条的宽度，不设时自适应。
				data:yDaraArr2
			}]
		}
		myCharts.setOption(option);
	</script>

	<script type="text/javascript">
	/* 
		折线图  常见效果
		标记;最大值  最小值   平均值   标注区间
			markPoint	markLine	markArea
		线条控制:  平滑  风格
			smooth		lineStyle
		填充风格:
			areaStyle
		紧挨边缘:
			boundaryGap
		缩放:脱离0值的比例
			scale
		堆叠图
			stack
	*/
		var myCharts = echarts.init(document.querySelector("#div2"));
		var xDataArr = ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"];
		var yDaraArr1 = [5088,3200,2000,4500,109,5005,2100,4001,1000,1088,3200,2000];
		// var yDaraArr1 = [3088,3200,3000,3500,3009,3005,3100,3001,3000,3088,3200,3000];
		var yDaraArr2 = [2088,5200,2300,6500,4009,5605,4000,3001,6200,2088,3200,4300];
		var option = {
			xAxis:{
				type:"category",//数值轴，适用于连续数据。
				data:xDataArr,
				boundaryGap:false	//紧挨边缘  没有间隔设置false  true是默认值
			},
			yAxis:{
				type:"value",
				scale:true	//如果数据大小不相上下 设置scale y轴数值从最小值开始  如果不设置scale几乎是一条直线
			},
			series:[
				{
					name:"康师傅",
					type:"line",
					data:yDaraArr1,
					markPoint:{// 最大值   最小值
						data:[{
							type:"max"
						},{
							type:"min"
						}]
					},
					markLine:{// 平均值
						data:[{
							type:"average"
						}]
					},
					markArea:{// 设置标注区间
						data:[
							[
								{xAxis:"一月"},
								{xAxis:"二月"}
							],
							[
								{xAxis:"七月"},
								{xAxis:"八月"}
							]
						]
					},
					smooth:true,//折线 变成平滑曲线
					lineStyle:{ // 设置折线的风格   颜色  以及虚线/点线/实线
						color:"green",
						type:"dashed"// 虚线  dotted点线  solid 实线   默认不写是实线
					},
					areaStyle:{//填充风格
						color:"pink"
					},
					stack:"all"
				},
				{
					name:"统一",
					type:"line",
					data:yDaraArr2,
					areaStyle:{},
					stack:"all"	//只要stack的值相同 就可以实现堆叠
				}
			]
		}
		myCharts.setOption(option);
	</script>
	<script type="text/javascript">
	/* 
	散点图的特点:散点图可以帮助我们推断出不同维度数据之间的相关性.
	散点图可以经常用在地图的标注上
		气泡图
			散点的大小不同
				symbolSize
			散点的颜色不同
				itemStyle.color
		涟漪动画
			type:effectScatter
			鼠标滑过显示涟漪动画
			showEffectOn:"emphasis"
			涟漪动画的范围和大小
			rippleEffect:{}
	*/
		var data = [{"gender":"male","height":190,"weight":90},{"gender":"male","height":170,"weight":63},{"gender":"male","height":175,"weight":77},{"gender":"male","height":178,"weight":80},{"gender":"male","height":177,"weight":163},{"gender":"male","height":160,"weight":63},{"gender":"male","height":188,"weight":190},{"gender":"male","height":190,"weight":93},{"gender":"male","height":188,"weight":88},{"gender":"male","height":169,"weight":170}];
		var axisData = [];// 将数据转换为二维数组
		for (var i = 0; i < data.length; i++) {
			const height = data[i].height;
			const weight = data[i].weight;
			var newData = [height,weight];
			axisData.push(newData);
		}
		var myCharts = echarts.init(document.querySelector("#div3"));
		var option = {
			xAxis:{
				type:"value",
				scale:true
			},
			yAxis:{
				type:"value",
				scale:true
			},
			series:[
				{
					// type:"scatter",//散点图
					type:"effectScatter",// 涟漪动画
					// showEffectOn:"emphasis",//鼠标滑过显示涟漪动画
					rippleEffect:{
						scale:5
					},
					data:axisData,	//需要二维数组
					symbolSize:function(arg){// 散点图的大小
						// console.log(arg); // 数组
						var height = arg[0] / 100;//身高的单位是cm   需要转变为m
						var weight = arg[1];
						//  bmi = 体重kg / (身高m * 身高m)  条件  大于28,就代表肥胖
						bmi = weight / (height * height);
						if(bmi > 28){
							return 30
						}
						return 10;
					},
					itemStyle:{// 散点图的颜色
						color:function(arg){
							var height = arg.data[0] / 100;//身高的单位是cm   需要转变为m
							var weight = arg.data[1];
							//  bmi = 体重kg / (身高m * 身高m)  条件  大于28,就代表肥胖
							bmi = weight / (height * height);
							if(bmi > 28){
								return "red"// 红色代表肥胖
							}
							return "green";// 绿色代表健康
						}
					}
				}
			]
		};
		myCharts.setOption(option);
	</script>

	<script type="text/javascript">
	/* 
		饼图
			显示数值:	label.formatter
			圆环:
				设置两个半径	radius:['50%','70%']
			南丁格尔图:
				roseType:'radius'
			选中效果
				选中模式: selectedMode:sing\multiple
				选中偏移量:	selectedOffset:30
		饼图特点:
			饼图可以很好地帮助用户快速了解不同分类的数据的占比情况
	*/
		var data = [{name:"淘宝",value:11231},{name:"京东",value:22673},{name:"唯品会",value:6123},{name:"1号店",value:8989},{name:"聚美优品",value:6700}];
		var myCharts = echarts.init(document.querySelector("#pie"));
		var option = {
			series:[
				{
					type:"pie",
					data:data,
					label:{// 饼图文字的显示
						show:true,	//显示文字
						formatter:function(arg){
							// console.log(arg);
							return arg.name + "平台" + arg.value + "元\n" + arg.percent + '%';
						}
					},
					// radius:'20%'	// 百分比参照的事宽度和高度中较小的那一部分的一半来进行百分比设置
					// radius:['50%','75%']	//实现圆环  第0个元素代表是内院半径  第1个元素外圆半径
					roseType:"radius",	// 南丁格尔图	饼图的每一个区域的半径是不同的
					// selectedMode:"single"	//选中的效果  能够将选中的区域偏离一小段
					selectedMode:"multiple",	//可以选中多个 都有偏离的效果
					selectedOffset:30		//选中的偏移量
				}
			]
		};
		myCharts.setOption(option);
	</script>

	<script type="text/javascript">
	/* 
		雷达图
			显示数值:	label
			区域面积:	areaStyle
			绘制类型:	shape
		雷达图可以用来分析多个维度的数据与标准数据的对比情况
	*/
		var myCharts = echarts.init(document.querySelector("#radar"));
		var dataMax = [	//各个维度的最大值
			{
				name:"易用性",
				max:100
			},
			{
				name:"功能",
				max:100
			},
			{
				name:"拍照",
				max:100
			},
			{
				name:"跑分",
				max:100
			},
			{
				name:"续航",
				max:100
			}
		]
		var option = {
			radar:{
				indicator:dataMax,	//	配置各个维度的最大值
				shape:"polygon"	//配置雷达图最外层的图形  circle是圆形	polygon默认的雷达图
			},
			series:[
				{
					type:"radar",	//radar 此图标是一个雷达图
					label:{	// 设置标签的样式
						show:true	// 显示数值
					},
					areaStyle:{},
					data:[	// 多个对象
							{
							name:"华为手机",
							value:[80,90,80,82,90]
						},
						{
							name:"中兴手机",
							value:[70,82,75,70,60]
						}
					]
				}
				
			]
		};
		myCharts.setOption(option);
	</script>

	<script type="text/javascript">
	/* 
		数值范围
			min	max
		仪表盘可以更直观的表现出某个指标的进度或实际情况
	*/
		var myCharts = echarts.init(document.querySelector("#gauge"));
		var option = {
			series:[
				{
					type:"gauge",
					data:[
						{
							value:97,	//每一个对象就代表一个指针
							itemStyle:{	//指针的颜色
								color:"pink"
							}
						},
						{
							value:85,	// 添加一个指针
							itemStyle:{
								color:"green"
							}
						}
					],
					min:50	// min	max 控制仪表盘数值范围
				}
			]
		};
		myCharts.setOption(option);
	</script>
</html>